<template>
  <div class="field">
    <div class="card_item" v-for="item in cardsOpen" :key="item.name">
      <Card>
        <i slot="icon" :class="item.icon"></i
        ><el-tooltip
          class="item"
          effect="dark"
          :content="item.title"
          placement="top"
          slot="title"
        >
          <span class="title">{{ item.title }}</span>
        </el-tooltip>
        <span slot="name" class="name">{{ item.name }}</span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="item.content"
          placement="top"
          slot="care"
        >
          <i :class="item.care"></i>
        </el-tooltip>
        <span slot="border1" class="border1">{{ item.border1 }}</span>
        <span slot="border2" class="border2">{{ item.border2 }}</span>
      </Card>
    </div>
  </div>
</template>

<script>
import Card from "./card.vue";
export default {
  name: "系统字段",
  components: {
    Card,
  },
  data() {
    return {
      cardsOpen: [
        {
          icon: "el-icon-edit-outline",
          title: "文档ID",
          name: "# _id",
          care: "el-icon-warning-outline",
          content: "CMS 系统字段，请勿随意修改。",
          border1: "单行字符串",
          border2: "系统字段",
        },
        {
          icon: "el-icon-date",
          title: "修改时间",
          name: "# _create Time",
          care: "el-icon-warning-outline",
          content:
            "CMS 系统字段，请勿随意修改。通过 CMS 系统录入的数据会默认添加该字段",
          border1: "日期与时间",
          border2: "系统字段",
        },
        {
          icon: "el-icon-date",
          title: "修改时间",
          name: "# _update Time",
          care: "el-icon-warning-outline",
          content:
            "CMS 系统字段，请勿随意修改。通过 CMS 系统录入的数据会默认添加该字段",
          border1: "日期与时间",
          border2: "系统字段",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.card_item:nth-child(odd) i {
  font-size: 30px;
  color: #5f19dd;
}

.card_item:nth-child(even) i {
  font-size: 30px;
  color: #01a4fd;
}
</style>
